<template>
    <div class="container">
        <div class="header">
            <van-icon @click="goBack" name="arrow-left" class="header-left" size="25" />
            订单详情
        </div>
        <status-bar :item="stateMap[detailData.trade_state]" />
        <div class="tips">
            <div class="dzf" v-if="detailData.trade_state === '待支付'">
                <div class="text1">订单待支付</div>
                <div class="text2">请在
                    <counter :second="second" />
                    内完成支付,超时订单自动取消
                </div>
                <div class="text3">
                    <van-button @click="showCode = true" type="success">微信支付(0.5元)</van-button>
                </div>
            </div>
            <div class="dzf" v-if="detailData.trade_state === '待服务'">
                <div class="text1">订单待服务</div>
                <div class="text2">请耐心等待商家服务</div>
                <div class="text3">
                    <van-button @click="goBack" type="success">返回</van-button>
                </div>
            </div>
            <div class="dzf" v-if="detailData.trade_state === '已完成'">
                <div class="text1">订单待服务</div>
                <div class="text2">请耐心等待商家服务</div>
                <div class="text3">
                    <van-button @click="goBack" type="success">返回</van-button>
                </div>
            </div>
        </div>
        <van-cell-group class="card">
            <div class="header-text">
                预约信息
            </div>
            <van-cell v-for="(item,key) in makeInfo" :key="key" span="8" :title="item" :value="formatData(key)"></van-cell>
        </van-cell-group>
        <van-cell-group class="card">
            <div class="header-text">
                订单信息
            </div>
            <van-cell v-for="(item,key) in orderInfo" :key="key" span="8" :title="item" :value="formatData(key)"></van-cell>
        </van-cell-group>
        <van-dialog v-model:show="showCode" title="微信支付" show-cancel-button>
            <van-icon name="cross" class="close" @click="showCode = false"></van-icon>
            <img :src="codeImg" />
        </van-dialog>
    </div>


</template>

<script setup>
import { getCurrentInstance, onMounted, reactive, ref, computed } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import statusBar from '../../components/statusBar.vue';
import counter from '../../components/counter.vue';
import Qrcode from 'qrcode';

const router = useRouter();

const route = useRoute();

const { proxy } = getCurrentInstance();

const codeImg = ref('');

//详情页数据
const detailData = reactive({});

const second = computed(() => {
    return detailData.order_start_time ? detailData.order_start_time + 7200000 - Date.now() : 0;
})

const stateMap = {
    '待支付': 10,
    '待服务': 20,
    '已完成': 30,
    '已取消': 40
};

// 订单详情
const makeInfo={
    service_name:'预约服务',
    hospital_name:'就诊医院',
    starttime:'期望就诊时间',
    'client.name':'就诊人',
    'client.mobile':'联系电话',
    receiveAddress:'接送地址',
    demand:'特殊需求'
};

const orderInfo = {
    tel:'联系电话',
    order_start_time:'下单时间',
    price:'应付金额',
    out_trade_no:'订单编号'
};

//解析数据的函数
const formatData = (key) => {
  if (key.indexOf(".") === -1) {
    if (key === "order_start_time") {
      return formatTimestamp(detailData[key]);
    }
    return detailData[key];
  }
  let arr = key.split(".").reduce((o, p) => {
    return (o || {})[p];
  }, detailData);
  return arr;
}
function formatTimestamp(timestamp) {
  const date = new Date(timestamp);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, "0"); // 月份是从0开始的，所以需要+1
  const day = String(date.getDate()).padStart(2, "0");

  return `${year}-${month}-${day}`;
}

const goBack = () => {//返回上一级
    router.go(-1);
};

onMounted(async () => {
    const { data } = await proxy.$api.orderDetail({ oid: route.query.oid });
    Object.assign(detailData, data.data);
    console.log(detailData, 'trade_state');

    Qrcode.toDataURL(detailData.code_url).then((url) => {
        codeImg.value = url;
    })

});

const showCode = ref(false);

</script>

<style scoped lang="less">
.container {
    background-color: #f0f0f0;
    height: 100vh;
}

.header {
    background-color: #fff;
    line-height: 40px;
    text-align: center;

    .header-left {
        float: left;
    }
}

.card {
    margin: 15px 0;
    padding: 10px;

    .header-text {
        padding-left: 5px;
        line-height: 30px;
        font-size: 16px;
        font-weight: bold;
        border-left: 4px solid red;
    }
}

.dzf {
    padding: 20px;

    .text1 {
        font-size: 20px;
        font-weight: bold;
        line-height: 30px;
        color: #666;
    }

    .text2 {
        font-size: 14px;
        color: #666;
    }

    .text3 {
        text-align: center;

        .van-button {
            margin-top: 10px;
            margin-left: 10px;
            width: 80%;
            font-weight: bold;
        }
    }
}

::v-deep(.van-dialog__content) {
    text-align: center;
    padding: 20px;

    .close {
        position: absolute;
        left: 20px;
    }
}
</style>